<template>
  <div class="swipeBox">
      <mt-swipe :auto="3000" :speed="500" :showIndicators="true">
        <mt-swipe-item><a href="#"><img src="../assets/temp/focus_pic1.jpg"></a></mt-swipe-item>
        <mt-swipe-item><a href="#"><img src="../assets/temp/focus_pic2.jpg"></a></mt-swipe-item>
        <mt-swipe-item><a href="#"><img src="../assets/temp/focus_pic3.jpg"></a></mt-swipe-item>
      </mt-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
  name: 'swipe',
  data () {
    return {
      
    }
  },
  mounted:function(){
    let img = document.querySelector(".swipeBox img");
    let swipeB = document.querySelector(".swipeBox");
    img.onload=function(){
      let imgH = img.height;
      swipeB.style.height = imgH+'px';
    };    
  },

  methods:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swipeBox{
  width:100%;
}
.swipeBox div{
  overflow:hidden;
}
.swipeBox a img {
    width: 100%;
    height: auto;
}
</style>
